<template>
  <!-- 新增编辑 -->
  <a-modal
    :width="600"
    :maskClosable="false"
    :visible="props.visible"
    :confirm-loading="loading"
    :forceRender="true"
    :title="isUpdate ? '编辑模型' : '新建模型'"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible="updateVisible"
    @ok="save"
    class="common-modal"
    @close="updateVisible(false)"
  >
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="1" tab="基本信息">
        <a-form ref="userFormRef" :model="form" :rules="rules" class="user-form">
          <a-form-item label="模型厂商" name="provider">
            <a-select
              :options="modelList.data"
              v-model:value="form.provider"
              :field-names="{ label: 'title', value: 'value' }"
              placeholder="请选择模型厂商"
            >
              <template #option="{ value, title }">
                <a-avatar :src="imageList[value]" style="margin-right: 8px" />
                {{ title }}
              </template>
            </a-select>
          </a-form-item>
          <a-form-item label="模型名称" name="name">
            <a-input v-model:value="form.name" placeholder="请输入模型名称" />
          </a-form-item>
          <a-form-item label="模型类型" name="modelType">
            <dict-select v-model:value="form.modelType" dictTypeCode="model_type"></dict-select>
          </a-form-item>
          <a-form-item label="基础模型" name="modelName">
            <a-input v-model:value="form.modelName" placeholder="请输入基础模型" />
          </a-form-item>
          <a-form-item label="API域名" name="baseUrl">
            <a-input v-model:value="form.baseUrl" placeholder="请输入API域名" />
          </a-form-item>
        </a-form>
      </a-tab-pane>
      <a-tab-pane key="2" tab="高级配置" v-if="form.modelType === 'LLM'">
        <a-form-item label="模型温度" name="name">
          <a-row>
            <a-col :span="18">
              <a-slider v-model:value="modelParams.temperature" :step="0.1" :min="0" :max="1" />
            </a-col>
            <a-col :span="4">
              <a-input-number v-model:value="modelParams.temperature" :min="0" :max="1" />
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item label="词汇属性" name="modelType">
           <a-row>
            <a-col :span="18">
              <a-slider v-model:value="modelParams.topP" :step="0.1" :min="0" :max="1" />
            </a-col>
            <a-col :span="4">
              <a-input-number v-model:value="modelParams.topP" :min="0" :max="1" />
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item label="话题熟悉" name="modelName">
           <a-row>
            <a-col :span="18">
              <a-slider v-model:value="modelParams.presencePenalty" :step="0.1" :min="0" :max="1" />
            </a-col>
            <a-col :span="4">
              <a-input-number v-model:value="modelParams.presencePenalty" :min="0" :max="1" />
            </a-col>
          </a-row>
        
        </a-form-item>
        <a-form-item label="重复属性" name="baseUrl">
           <a-row>
            <a-col :span="18">
              <a-slider v-model:value="modelParams.frequencyPenalty" :step="0.1" :min="0" :max="1" />
            </a-col>
            <a-col :span="4">
              <a-input-number v-model:value="modelParams.frequencyPenalty" :min="0" :max="1" />
            </a-col>
          </a-row>
      
        </a-form-item>
        <a-form-item label="最大回复" name="baseUrl">
           <a-row>
            <a-col :span="18">
              <a-slider v-model:value="modelParams.maxTokens" :step="1" :min="0" :max="10000" />
            </a-col>
            <a-col :span="4">
              <a-input-number v-model:value="modelParams.maxTokens" :min="0" :max="10000"/>
            </a-col>
          </a-row>
       
        </a-form-item>
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>

<script setup name="UserAddEdit">
import { ref, onMounted, computed } from 'vue';
import { message } from 'ant-design-vue';
import { ModelApi } from '@/views/super/airag/aimodel/api/ModelApi';
import modelList from '../model.json';
import { imageList } from '../model.data';
const props = defineProps({
  visible: Boolean,
  data: Object
});
const rules = ref({
  provider: [{ required: true, message: '请选择模型厂商' }],
  name: [{ required: true, message: '请输入模型名称' }],
  modelType: [{ required: true, message: '请选择模型类型' }],
  modelName: [{ required: true, message: '请输入基础模型' }],
  baseUrl: [{ required: true, message: '请输入API域名' }]
});
const emits = defineEmits(['update:visible', 'done']);

// 弹框加载
const loading = ref(false);
// 是否是编辑状态
const isUpdate = ref(false);
// 表单数据
const form = ref({});
const modelParams = ref({});
// ref
const userFormRef = ref(null);

onMounted(async () => {
  if (props.data) {
    console.log('props.data', props.data);
    form.value = { ...props.data };
    // modelParams.value.temperature=0.2;
    modelParams.value = JSON.parse(props.data.modelParams) || {};

    isUpdate.value = true;
  } else {
    isUpdate.value = false;
  }
});

// 更改弹框状态
const updateVisible = value => {
  emits('update:visible', value);
};

// 点击保存
const save = async () => {
  userFormRef.value.validate().then(async valid => {
    if (valid) {
      loading.value = true;
      // 编辑操作
      if (isUpdate.value) {
        ModelApi.edit({ ...form.value, modelParams: JSON.stringify(modelParams.value) })
          .then(async result => {
            loading.value = false;
            message.success(result.message);
            updateVisible(false);
            emits('done');
          })
          .catch(() => {
            loading.value = false;
          });
      } else {
        // 新增操作
        ModelApi.add({ ...form.value, modelParams: JSON.stringify(modelParams.value) })
          .then(async result => {
            loading.value = false;
            message.success(result.message);
            updateVisible(false);
            emits('done');
          })
          .catch(() => {
            loading.value = false;
          });
      }
    }
  });
};
</script>

<style></style>
